<template>
  <div class="top">
    <div class="top-title row">
      <div class="title-left row">
        <router-link to="/" class="title-text">JJ</router-link>
        <router-link to="/" class="title-text">电影</router-link>
        <router-link to="/" class="title-text">音乐</router-link>
        <router-link to="/" class="title-text">读书</router-link>
        <router-link to="/" class="title-text">同城</router-link>
        <router-link to="/" class="title-text">小组</router-link>
        <router-link to="/" class="title-text">美食</router-link>
        <router-link to="/" class="title-text">FM</router-link>
        <router-link to="/" class="title-text">时间</router-link>
        <router-link to="/" class="title-text">商城</router-link>
        <router-link :to="{name:'SearchCustomer'}" class="title-text">客服</router-link>
        <router-link to="/" class="title-text">更多</router-link>
      </div>
      <div class="title-right row">
        <router-link to="/login" class="title-text">登陆</router-link>
        <router-link to="/reg" class="title-text">注册</router-link>
      </div>
    </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            input4: null
        }
    },
    methods: {
        toSearch() {
            this.$router.push({ path: "/search-result" })
        }
    }
}
</script>
<style lang="less" scoped>
    .top {
        width: 100vw;
        min-width: 800px;
        .top-title {
            background-color: #545652;
            height: 5vh;
            .title-right {
                width: 10vw;
                min-width: 80px;
                .title-text {
                    font-size: 6px;
                    display: block;
                    padding-left: 6px;
                    padding-right: 6px;
                    color: #d5d5d5;
                    cursor: pointer;
                    outline: none;
                    text-decoration: none;
                }
            }
            .title-left {
                width: 90vw;
                min-width: 720px;
                .title-text {
                    font-size: 6px;
                    display: block;
                    padding-left: 10px;
                    padding-right: 10px;
                    color: #d5d5d5;
                    cursor: pointer;
                    outline: none;
                    text-decoration: none;
                }
            }
        }

        .top-search {
            height: 10vh;
            width: 100vw;
            min-width: 800px;
            background: #f0f3f5;
            border-bottom: 1px solid #e5ebe4;
            .text-logo {
                .log {
                    width: 6vw;
                    min-width: 48px;
                    height: 30px;
                    margin-left: 3vw;
                }
            }
            .text-log {
                .log {
                    width: 6vw;
                    min-width: 48px;
                    height: 30px;
                    margin-left: 18vw;
                }
            }
            .search {
                margin-left: 60px;
                width: 600px;
                .search-input {
                    width: 80%;
                }
            }
        }

        .top-menu {
            height: 5vh;
            width: 100vw;
            min-width: 800px;
            background: #f0f3f5;
            .menu {
                margin-left: 17vw;
                .text {
                    min-width: 20px;
                    margin-left: 12px;
                    font-size: 14px;
                    display: block;
                    padding-left: 8px;
                    padding-right: 8px;
                    color: #27a;
                    cursor: pointer;
                    outline: none;
                    text-decoration: none;
                    &:hover {
                        color: #fff;
                        background-color: #27a;
                    }
                }
            }
        }
    }
</style>
